<!-- eslint-disable no-console -->
<script setup lang="ts">
import type { DictApi } from '#/api';

import { reactive, ref } from 'vue';

import { message, RadioGroup } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { getTeamListAll } from '#/api';

import Holiday from '../../holiday/index.vue';

const selectedValue = ref('');

const teamList = reactive<DictApi.SelectOption[]>([]);
getTeamListAll().then((res) => {
  // console.log(res..);
  res.data.forEach((Item) =>
    teamList.push({ label: Item.teamName, value: Item.teamId.toString() }),
  );
});

const [QueryForm] = useVbenForm({
  showDefaultActions: false,
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,

  layout: 'horizontal',
  schema: [
    {
      component: 'DatePicker',
      fieldName: 'datePicker',
      label: '日期',
    },
  ],
  wrapperClass: 'grid-cols-1 md:grid-cols-2',
});
function onSubmit(values: Record<string, any>) {
  message.success({
    content: `form values: ${JSON.stringify(values)}`,
  });
}
</script>
<template>
  <div class="flex p-5">
    <el-aside width="150px">
      <div>
        <div>
          <RadioGroup
            v-model:value="selectedValue"
            :options="teamList"
            option-type="button"
            button-style="solid"
            class="flex flex-col"
          />
        </div>
      </div>
    </el-aside>
    <el-main>
      <QueryForm />
      <Holiday />
    </el-main>
  </div>
</template>
<style scoped>
:deep(.ant-radio-button-wrapper:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

:deep(.ant-radio-button-wrapper:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
</style>
